import React, { useEffect } from 'react';
import { Switch, Tooltip, Dropdown, Menu, Button } from 'antd';
import { BulbOutlined, CheckOutlined, BgColorsOutlined } from '@ant-design/icons';
import { useThemeStore } from '../../stores/themeStore';
import './ThemeSwitcher.less';

interface ThemeSwitcherProps {
  position?: 'header' | 'sidebar';
}

const ThemeSwitcher: React.FC<ThemeSwitcherProps> = ({ position = 'header' }) => {
  const { 
    isDarkMode, 
    primaryColor, 
    toggleDarkMode, 
    setPrimaryColor, 
    applyTheme 
  } = useThemeStore();
  
  // 预设主题色
  const presetColors = [
    { name: '默认蓝', value: '#1890ff' },
    { name: '拂晓蓝', value: '#1677ff' },
    { name: '酱紫', value: '#722ed1' },
    { name: '青柠绿', value: '#52c41a' },
    { name: '极光绿', value: '#13c2c2' },
    { name: '日暮', value: '#fa8c16' },
    { name: '火山红', value: '#f5222d' },
    { name: '深邃蓝', value: '#0d1b42' },
  ];
  
  // 应用主题
  useEffect(() => {
    applyTheme();
  }, [isDarkMode, primaryColor, applyTheme]);
  
  // 颜色选择下拉菜单
  const colorMenu = (
    <Menu>
      {presetColors.map((color) => (
        <Menu.Item 
          key={color.value}
          onClick={() => setPrimaryColor(color.value)}
          style={{ display: 'flex', alignItems: 'center' }}
        >
          <div 
            className="color-block"
            style={{ 
              backgroundColor: color.value, 
              width: 16, 
              height: 16, 
              borderRadius: '50%', 
              marginRight: 8,
              border: '1px solid #d9d9d9'
            }} 
          />
          <span>{color.name}</span>
          {primaryColor === color.value && (
            <CheckOutlined style={{ marginLeft: 'auto' }} />
          )}
        </Menu.Item>
      ))}
      <Menu.Divider />
      <Menu.Item key="custom">
        <div style={{ display: 'flex', alignItems: 'center' }}>
          <span>自定义</span>
          <input 
            type="color" 
            value={primaryColor}
            onChange={(e) => setPrimaryColor(e.target.value)}
            style={{ marginLeft: 8, cursor: 'pointer' }}
          />
        </div>
      </Menu.Item>
    </Menu>
  );
  
  // 根据位置渲染不同样式
  if (position === 'sidebar') {
    return (
      <div className="theme-switcher sidebar-style">
        <div className="theme-item">
          <span className="label">暗黑模式</span>
          <Switch 
            checked={isDarkMode} 
            onChange={toggleDarkMode}
            checkedChildren="开"
            unCheckedChildren="关"
          />
        </div>
        <div className="theme-item">
          <span className="label">主题色</span>
          <Dropdown overlay={colorMenu} placement="topRight" trigger={['click']}>
            <div
              className="color-picker"
              style={{ 
                backgroundColor: primaryColor,
                cursor: 'pointer',
                width: 20,
                height: 20,
                borderRadius: '50%',
                border: '1px solid #d9d9d9'
              }}
            />
          </Dropdown>
        </div>
      </div>
    );
  }
  
  // 头部样式
  return (
    <div className="theme-switcher header-style">
      <Tooltip title={`切换到${isDarkMode ? '明亮' : '暗黑'}模式`}>
        <Button 
          type="text" 
          icon={<BulbOutlined />} 
          onClick={toggleDarkMode}
          className={isDarkMode ? 'dark-icon' : ''}
        />
      </Tooltip>
      <Tooltip title="更换主题色">
        <Dropdown overlay={colorMenu} placement="bottomRight" trigger={['click']}>
          <Button 
            type="text" 
            icon={<BgColorsOutlined style={{ color: primaryColor }} />} 
          />
        </Dropdown>
      </Tooltip>
    </div>
  );
};

export default ThemeSwitcher; 